<template>
  <div class="settings-container">
    <button
      @click="showSettingsModal = true"
      class="settings-trigger"
      title="设置"
    >
      <i class="fas fa-cog"></i>
    </button>

    <!-- 设置弹窗 -->
    <div
      v-if="showSettingsModal"
      class="modal-overlay"
      @click="showSettingsModal = false"
    >
      <div class="modal-content settings-modal" @click.stop>
        <div class="settings-modal-header">
          <span class="settings-modal-title"
            ><i class="fas fa-cog"></i> 设置</span
          >
          <button
            @click="showSettingsModal = false"
            class="settings-modal-close"
          >
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="settings-modal-body">
          <div class="settings-group">
            <label class="settings-label">API请求地址</label>
            <input
              v-model="apiBaseUrl"
              class="settings-input"
              placeholder="如 http://localhost:3001"
            />
          </div>
          <div class="settings-group">
            <label class="settings-label">背景设置</label>
            <div class="background-options">
              <div class="option-group">
                <label class="radio-label">
                  <input
                    type="radio"
                    name="bgType"
                    value="theme"
                    :checked="bgType === 'theme'"
                    @change="handleBgTypeChange('theme')"
                  />
                  系统皮肤
                </label>
                <div class="theme-options" v-show="bgType === 'theme'">
                  <button
                    v-for="theme in themes"
                    :key="theme.value"
                    :class="[
                      'theme-select-btn',
                      { active: currentTheme === theme.value },
                    ]"
                    @click="switchTheme(theme.value)"
                  >
                    {{ theme.label }}
                  </button>
                </div>
              </div>

              <div class="option-group">
                <label class="radio-label">
                  <input
                    type="radio"
                    name="bgType"
                    value="custom"
                    :checked="bgType === 'custom'"
                    @change="handleBgTypeChange('custom')"
                  />
                  自定义背景
                </label>
                <div class="custom-bg-options" v-show="bgType === 'custom'">
                  <input
                    v-model="bgUrl"
                    class="settings-input"
                    placeholder="图片URL"
                  />
                  <button
                    @click="$refs.bgFileInput.click()"
                    class="settings-upload-btn"
                  >
                    上传图片
                  </button>
                  <input
                    type="file"
                    ref="bgFileInput"
                    style="display: none"
                    accept="image/*"
                    @change="handleBgFileChange"
                  />
                  <div v-if="bgUrl" class="settings-bg-preview">
                    <img :src="bgUrl" />
                    <button class="remove-bg-btn" @click="removeBgImage">
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button @click="saveSettings" class="settings-save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getApiBaseUrl, setApiBaseUrl } from "../config/index.js";

const showSettingsModal = ref(false);
const apiBaseUrl = ref("");
const bgUrl = ref("");
const bgFileInput = ref(null);
const bgType = ref(localStorage.getItem("bgType") || "theme");
const currentTheme = ref(localStorage.getItem("theme") || "default-theme");

const themes = [
  { label: "默认", value: "default-theme" },
  { label: "科技风", value: "tech-theme" },
];

// 初始化
onMounted(async () => {
  apiBaseUrl.value = await getApiBaseUrl();
  const savedBgUrl = localStorage.getItem("customBgUrl");
  if (savedBgUrl) {
    bgUrl.value = savedBgUrl;
  }
});

// 保存设置
async function saveSettings() {
  await setApiBaseUrl(apiBaseUrl.value);
  if (bgUrl.value) {
    localStorage.setItem("customBgUrl", bgUrl.value);
  }
  showSettingsModal.value = false;
  // 通知其他组件API地址已更新
  window.dispatchEvent(new CustomEvent("apiBaseUrlChanged"));
}

// 处理背景类型切换
function handleBgTypeChange(type) {
  bgType.value = type;
  localStorage.setItem("bgType", type);

  if (type === "theme") {
    bgUrl.value = "";
    localStorage.removeItem("customBgUrl");
    window.dispatchEvent(
      new CustomEvent("backgroundChanged", {
        detail: { type: "theme" },
      })
    );
  }
}

// 切换主题
function switchTheme(theme) {
  currentTheme.value = theme;
  localStorage.setItem("theme", theme);

  const app = document.getElementById("app");
  const body = document.body;

  app?.classList.remove("default-theme", "tech-theme");
  body.classList.remove("default-theme", "tech-theme");

  app?.classList.add(theme);
  body.classList.add(theme);

  window.dispatchEvent(new CustomEvent("themeChanged"));
}

// 处理背景图片上传
function handleBgFileChange(event) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    bgUrl.value = e.target.result;
    localStorage.setItem("customBgUrl", bgUrl.value);
  };
  reader.readAsDataURL(file);
}

// 移除背景图
function removeBgImage() {
  bgUrl.value = "";
  localStorage.removeItem("customBgUrl");
  handleBgTypeChange("theme");
}
</script>

<style scoped>
.settings-container {
  /* 移除margin，由父容器控制间距 */
}

.settings-trigger {
  background: rgba(240, 147, 23, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(240, 147, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  padding: 0;
  min-width: unset;
}

.settings-trigger:hover {
  background: rgba(240, 147, 23, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(240, 147, 23, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 其他样式保持不变 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.settings-modal {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.settings-modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-modal-title {
  font-size: 18px;
  font-weight: 600;
}

.settings-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.settings-modal-body {
  padding: 20px;
}

.settings-group {
  margin-bottom: 20px;
}

.settings-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.settings-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.settings-save-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  transition: all 0.3s ease;
}

.settings-save-btn:hover {
  background: #5a6fd6;
}

.background-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.radio-label input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.theme-options {
  display: flex;
  gap: 10px;
  margin-left: 24px;
}

.theme-select-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.theme-select-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.3);
}

.theme-select-btn.active {
  background: rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.4);
  color: #667eea;
}

.custom-bg-options {
  margin-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-upload-btn {
  align-self: flex-start;
  padding: 8px 16px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.settings-upload-btn:hover {
  background: #e5e7eb;
}

.settings-bg-preview {
  position: relative;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.settings-bg-preview img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.remove-bg-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.remove-bg-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
</style>
